<template>
  <div class="main">
    <search ref="mysearch" @doReset="doReset" @doQuery="doRefresh" :ruleform="ruleForm">
      <template slot="top">
        <el-form-item label="系统名称:" prop="systemId" size="small" label-width="80px">
          <el-select v-model="ruleForm.systemId" placeholder="请输入接口名称">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="(item, index)  in systemNameOption" :label="item.name" :value="item.id"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境名称:" prop="environmentId" size="small" label-width="100px">
          <el-select v-model="ruleForm.environmentId" placeholder="请输入接口名称">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="(item, index)  in envNameOption" :label="item.name" :value="item.id"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务名称:" prop="serviceId" size="small" label-width="100px">
          <el-select v-model="ruleForm.serviceId" placeholder="请输入接口名称">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="(item, index)  in serviceNameOption" :label="item.name" :value="item.id"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口名称:" prop="apiId" size="small" label-width="100px">
          <el-select v-model="ruleForm.apiId" placeholder="请输入接口名称">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="(item, index)  in joggleNameOption" :label="item.name" :value="item.id"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间:" prop="createDate" size="small" class="datePicker" label-width="80px">
          <el-date-picker v-model="ruleForm.createDate" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否存活:" prop="available" size="small" label-width="100px">
          <el-select v-model="ruleForm.available" style="width:100%">
            <el-option value="" label="全部"></el-option>
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="问题描述:" prop="description" size="small" label-width="100px">
          <el-input v-model="ruleForm.description" placeholder="请输入问题描述"></el-input>
        </el-form-item>
      </template>
    </search>
    <div class="table-warpper">
      <mytable :config="tableconfig" ref="mytable">
        <!-- 启用 -->
        <template v-slot:available="{ data }">
          <p v-if="data.available == 1">是</p>
          <p v-else style="color:red;font-weight: 700;">否</p>
        </template>
        <!-- 问题描述 -->
        <template v-slot:description="{ data }">
          <p v-if="data.description == null">-</p>
          <p v-else>{{ data.description }}</p>
        </template>
      </mytable>
    </div>
  </div>
</template>

<script>
import mytable from "@/components/table/index.vue";
import search from "@/components/search.vue";
import { logList, systemFind, serviceData, apiData, environmentData } from "@/api/controlSystem/joggle.js"
import { changeParam } from "@/utils/helper";
export default {
  components: {
    mytable,
    search,
  },
  data() {
    return {
      joggleNameOption: [],
      systemNameOption: [],
      envNameOption: [],
      serviceNameOption: [],
      ruleForm: {
        systemId: null,
        environmentId: null,
        serviceId: null,
        available: null,
        description: "",
        apiId: null,
        startTime: "",
        endTime: "",
        createDate: [],
        pageNo: 1,
        pageSize: 20
      },
      tableconfig: {
        loading: false,
        isselection: false,
        ispagination: true,
        isfixed: true,
        tabledata: [],
        isindex: true,
        thead: [
          // { sort: null, label: "序号", prop: "id", width: 100 },
          { sort: null, label: "系统名称", prop: "systemName", width: 150 },
          { sort: null, label: "环境名称", prop: "environmentName", width: 150 },
          { sort: null, label: "服务名称", prop: "serviceName", width: 150 },
          { sort: null, label: "接口名称", prop: "apiName", width: 150 },
          { sort: null, label: "是否存活", prop: "available",type:'slot', width: 60 },
          { sort: null, label: "开始时间", prop: "startTime", width: 150 },
          { sort: null, label: "问题描述", prop: "description",type:'slot', width: 250 },
        ],
        // checkedAll: false, //全选所有
        checkedPage: false, //全选本页
        currentpage: 1,
        pagesize: 0,
        total: 0,
      },
    };
  },
  mounted() {
    this.handleList();
    this.handleName();
  },
  methods: {
    // 名称列表
    handleName() {
      let params = {
        name: '',
        pageNo: 1,
        pageSize: 99999,
      }
      systemFind(changeParam({ ...params })).then(res => {
        console.log('tag', res)
        if (res.success) {
          this.systemNameOption = res.result.list
        }
      })
      let envParams = {
        systemId: '',
        systemName: '',
        name: '',
        pageNo: 1,
        pageSize: 99999,
      }
      serviceData(changeParam({ ...envParams })).then(res => {
        console.log(res, 'rrrrrrr');
        if (res.success) {
          this.serviceNameOption = res.result.list;
        }
      })
      environmentData(changeParam({ ...envParams })).then(res => {
        console.log(res, 'rrrrrrr');
        if (res.success) {
          this.envNameOption = res.result;
        }
      })
      let apiParams = {
        id: "",
        name: "",
        systemId: "",
        systemName: "",
        environmentId: "",
        environmentName: "",
        serviceId: "",
        serviceName: "",
        pageNo: 1,
        pageSize: 9999,
      }
      apiData(changeParam({ ...apiParams })).then(res => {
        if (res.success) {
          this.joggleNameOption = res.result.list;
        }
      })
    },
    // 重置
    doReset() {
      Object.keys(this.ruleForm).slice(0, -2).map(item => {
        this.ruleForm[item] = "";
      });
      // this.$message({
      //   message: "已重置",
      //   type: "success",
      // });
      this.doRefresh()
    },
    // 搜索
    doRefresh() {
      this.tableconfig.currentpage = 1;
      this.ruleForm.pageNo = 1;
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
      this.handleList()
    },
    // 页码数更新
    handleSizeChange(val) {
      console.log('tag', val)
      this.ruleForm.pageNo = 1;
      this.ruleForm.pageSize = val;
      this.handleList();
      //表格回到顶部
      this.$refs.mytable.$emit('handleGoTop');
    },
    // 当前页码更新
    handleCurrentChange(val) {
      console.log('val', val)
      this.ruleForm.pageNo = val;
      console.log(this.ruleForm.pageNo, 'this.tableconfig.currentpage');
      this.handleList();
      //表格回到顶部
      this.$refs.mytable.$emit('handleGoTop');
    },
    // 获取列表
    async handleList() {
      this.tableconfig.loading = true;
      this.tableconfig.currentpage = this.ruleForm.pageNo;
      this.tableconfig.pagesize = this.ruleForm.pageSize;
      this.ruleForm.startTime = this.ruleForm.createDate[0];
      this.ruleForm.endTime = this.ruleForm.createDate[1]
      let tableResult = await logList(this.ruleForm)
      if (tableResult.success) {
        this.tableconfig.tabledata = tableResult.result.list;
        this.tableconfig.total = tableResult.result.total;
        this.ruleForm.pageNo = tableResult.result.pageNum;
        this.ruleForm.pageSize = tableResult.result.pageSize;

      }
      this.tableconfig.loading = false;
    }
  },
};
</script>
<style lang="scss" scoped>
.main {
  .datePicker ::v-deep .el-range-separator {
    width: 30px;
  }
}
</style>
